<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width: 200px;
            height: 35px;
            line-height: 35px;
            background-color: darkblue;
            color: white;
        }

    </style>
</head>
<body>
<div>

    <div>
        <div class="menu" onclick="CheckMenu(this);">菜单1</div>
        <div class="content">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div>
        <div class="menu" onclick="CheckMenu(this);">菜单2</div>
        <div class="content hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div>
        <div class="menu" onclick="CheckMenu(this);">菜单3</div>
        <div class="content hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>

</div>

<script>
    function  CheckMenu(ths) {
        //var curent_id = document.getElementById(nid);
        //获取最大的父标签
        curent_id = ths
        var all_parent = curent_id.parentElement.parentElement;
        //获取父标签下的子标签列表
        var parent_children_list = all_parent.children;
        for(i=0;i<parent_children_list.length;i++){
            parent_children_list[i].children[1].classList.add('hide');
        }
        //当前标签的下一个兄弟标签元素的class列表，并删除hide类。
        curent_id.nextElementSibling.classList.remove('hide');
    }
</script>

</body>
</html>